<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <clipPath id="cut-off-bottom">
            <rect x="0" y="0" width="200" height="100" />
        </clipPath>

        <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="red" />
            <stop offset="55%" stop-color="yellow" />
            <stop offset="100%" stop-color="green" />

        </linearGradient>
    </defs>
    <circle cx="100" cy="100" r="50" clip-path="url(#cut-off-bottom)"
            fill="url(#gradient)"/>
</svg>
